<template>
  <div id="passage-top">
    <recommend-passage :passages="passages"></recommend-passage>
  </div>
</template>

<script setup lang="ts">
import RecommendPassage from '@/composables/RecommendPassage.vue'
import { message } from '@/utils/commonMessage/common.js'
import { getRecommendTopPassage } from '@/services/api/passage'
import { onBeforeMount, reactive } from 'vue'
import type { Passage } from '@/utils/dataType/ArticleModel'
import { ElMessage } from 'element-plus'

const passages = reactive<Array<Passage>>([])

async function recommendTopPassage() {
  try {
    const res = await getRecommendTopPassage({ range: 'week' }) //需要传递对象数据
    if (res.data.length == 0) {
      ElMessage.info('暂无文章推荐')
    } else {
      passages.splice(0, passages.length, ...res.data)
      ElMessage.success('已成功为您推荐置顶' + res.data.length + '篇文章')
    }
  } catch (error) {
    console.error('[top热度推荐]:失败->', error)
  }
  // const res = await getRecommendTopPassage({ range: 'week' }) //需要传递对象数据
  // console.log('top热度推荐' + res)
  // if (res.status == 200 && res.data.code == 1) {
  //   if (res.data.data.length == 0) {
  //     ElMessage.info('暂无文章推荐')
  //   } else {
  //     passages.splice(0, passages.length, ...res.data.data)
  //     ElMessage.success('已成功为您推荐置顶' + res.data.data.length + '篇文章')
  //   }
  // } else {
  //   ElMessage.error('出错了:' + res.data.msg)
  // }
}

onBeforeMount(() => {
  recommendTopPassage()
})
</script>

<style>
#passage-top {
  width: 100%;
}
</style>
